import React , {useRef,useEffect}from 'react'
import * as echarts from 'echarts';
import {option} from "../options/pieOption"
import {useDispatch,useSelector} from "react-redux"
import * as action from "../action"
function Piecharts() {
  let dispatch = useDispatch()
  let store = useSelector((state)=>{
    return {
        ...state.chartreducer
    }
  })
  let myref = useRef(null)
  useEffect(()=>{
    let myChart = echarts.init(myref.current);
     dispatch(action.getlist())
    //  setTimeout(()=>{
      
    //     myChart.setOption(option)
    //  },200)
    
    
    
  },[])
  let pieaction = ()=>{
    let myChart = echarts.init(myref.current);
    option.series[0].radius = store.radius
    option.series[0].data = store.arr
    myChart.setOption(option)
  }
  useEffect(()=>{
    pieaction()
    console.log(1);
  },[store.radius,store.arr])
  let setPie = (data)=>{
    dispatch(action.changePie(data))
  }
  return (
    <div>
        <div style={{width:"600px",height:"400px"}} ref={myref}></div>
        <button onClick={()=>setPie(["50%"])}>饼状图</button>
        <button onClick={()=>setPie(['40%', '70%'])}>环形图</button>
    </div>
  )
}

export default Piecharts